<template>
    <div class="products-attributes">
        <h5 v-pre>
            <strong>Details:</strong>
        </h5>
        <ul class="list-unstyled">
            <li v-for="item in attributes" :key="item.title">
                <span class="products-attributes-title" v-text="item.title"></span>
                <span class="products-attributes-value" v-text="item.value"></span>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props: ['attributes']
}
</script>
<style>
.products-attributes {
    margin-top: 25px;
}

.products-attributes li {
    position: relative;
    height: 25px;
    border-bottom: 1px dotted #ccc;
}

.products-attributes li span {
    position: absolute;
    left: 0;
    bottom: -1px;
    background: #fff;
}

.products-attributes li .products-attributes-value {
    left: auto;
    right: 0;
    color: #686868;
}
</style>
